<!DOCTYPE html>
<html lang="en" id="html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../dist/CDView.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="./cockpit.css">
</head>
<body id="body">
<div class="cockpit">
    <div class="left">
        <div class="font1">
            <i>一小时内各手机销量趋势</i>
        </div>
        <div id="t1" class="container"></div>
        <div class="font2">
            <i>一小时内各手机销量占比</i>
        </div>
        <div id="t2" class="container"></div>
    </div>
    <div class="center">
            <div class="font3">
                <span>双11手机品牌销量情况</span>
            </div>
            <div class="scroll">
                <ul class="foot" id="upScroll">
                    <li>21点到22点，华为售出了10万台手机，收入2348万元</li>
                    <li>21点到22点，小米售出了26.2万台手机，收入5000万元</li>
                    <li>21点到22点，苹果售出了9.3万台手机，收入3004万元</li>
                    <li>21点到22点，三星售出了5.2万台手机，收入1300万元</li>
                </ul>
            </div>
            <div id="t5" class="container1">
                <div class="font1">
                    <i>各个品牌手机在城市中的销售分布</i>
                </div>
                <div class="buttons">
                    <button class="button">小米</button>
                    <button class="button">华为</button>
                    <button class="button">三星</button>
                    <button class="button">苹果</button>
                    <button class="button">其它</button>
                </div>
            </div>
    </div>
    <div class="right">
        <div class="font1">
            <i>各手机在各年龄段的受欢迎层度</i>
        </div>
        <div id="t3" class="container"></div>
        <div class="font2">
            <i>各手机在男女中的销量</i>
        </div>
        <div id="t4" class="container"></div>
    </div>
</div>
</body>
<script src="./changeData.js"></script>
<script src="scroll.js"></script>
<script>
    //固定
    document.getElementById('html').style.setProperty('width',window.screen.availWidth+'px');
    document.getElementById('html').style.setProperty('height',window.screen.availHeight*0.89 +'px');
    //启动滚动条

    myScroll.upScroll("upScroll", "-36px", 3000);
    //配置
    let config1 = {
        VC: {
            color: 'name',
            size: 'value'
        },
        pie: {
            innerRadius: 0,
            outerRadius: 90,
        },
        tooltip: {
            content: function (d) {
                //console.log(d) 不知道d是什么结构时看一下
                return (d.data.name + '销量为：' + d.value + '万台')
            }
        },
        legend: {
            content: function (d) {
                return `${d.name}`
            }
        },
        text: {
            content: function (d) {
                return d.data.name
            },
            fontSize: function (d) {
                return d.data.value / 3
            }
        },
        animation: true,
        lineTip: {
            lineColor: '#fff'
        }
    };
    let config2 = {
        VC: {
            groupName: 'sex',
            members: 'phone',
            memberName: 'name',
            memberValue: 'sales',
            color: 'name'
        },
        tooltip: {
            content: function (d) {
                return `${d.name}手机的销量为：${d.sales}万件`
            }
        },
        legend: {
            content: function (d) {
                return `${d.name}`
            }
        }
    };
    let config3 = {
        VC: {
            attr: 'attribute',
            attrName: 'name',
            attrValue: 'value',
            color: 'name'
        },
        rangeValue: [0, 100],
        interval: 10,
        tooltip: {
            content: function (d) {
                return `${d.name}手机在各个年龄段的销售能力值：<br>
                                    18~25岁：${d.attribute[0].value}<br>
                                    25~32岁：${d.attribute[1].value}<br>
                                    32~40岁：${d.attribute[2].value}<br>
                                    40~48岁：${d.attribute[3].value}<br>
                                    48~55岁：${d.attribute[4].value}
                                    `
            }
        },
        legend: {
            content: function (d) {
                return `${d.name}`
            }
        }
    };
    let config4 = {
        VC: {
            position: ['date', 'saleInfo.number'],
            color: 'saleInfo.name'
        },
        line: {
            dots: true,
            area: true
        },
        tooltip: {
            content: function (d) {
                return `${d.date}：<br>
                            小米的销量为：${d.saleInfo[0].number}<br>
                            华为的销量为：${d.saleInfo[1].number}<br>
                            三星的销量为：${d.saleInfo[2].number}<br>
                            苹果的销量为：${d.saleInfo[2].number}<br>
                            其它的销量为：${d.saleInfo[2].number}`
            }
        },
        legend: {
            content: function (d) {
                return d[0].name
            }
        },
        axis: {
            xTickFormat: function (time) {
                //这里使用了d3.time.format,具体查看d3时间字符串格式化表
                return time.format('%H:%M')
            },
            xTicks: function (time) {
                //这里使用了d3.time.interval具体查看d3时间间隔
                return [time.minute, 10]
            }
        }
    };
    let config5 = {
        map: {},
        geometry: 'polygon', //因为地图的格式不同，所以选择不同的几何层级（维度）
        size: 0.9,
        tooltip: {
            content: function (d) {
                return `${d.properties.name}`
            }
        },
        dots: 'ajaxData',
        dotsTooltip: 'config'
    };
    let data5;

    //一次画5张图表的方法
    function draw() {
        //使用ajax请求数据
        $.getJSON('data.json', '', function (data) {
            let data1 = data.data1;
            let data2 = data.data2;
            let data3 = data.data3;
            let data4 = data.data4;
            data5 = data.data5;

            CDView.nightingale_rose.selectById('t2').draw(data1, config1);
            CDView.group_bar.selectById('t4').draw(data2, config2);
            CDView.radar.selectById('t3').draw(data3, config3);
            CDView.multi_curve.selectById('t1').draw(data4, config4);

            // 地图默认加载小米
            config5.dots = data5[0].info;
            modifyTT('小米')
            draw1();
        });
    }

    //使用ajax获取数据,加载地图
    function draw1() {
        $.getJSON('china_simplify.json', '', function (data) {
            CDView.basic_map.selectById('t5').draw(data, config5)
        });
    }

    //初始化数据
    draw();
    $('.buttons button').click(function () {
            let name = $(this).text();
            if (name === '小米') {
                config5.dots = data5[0].info;
                modifyTT('小米')
            } else if (name === '华为') {
                config5.dots = data5[1].info;
                modifyTT('华为')
            } else if (name === '三星') {
                config5.dots = data5[2].info;
                modifyTT('三星')
            } else if (name === '苹果') {
                config5.dots = data5[3].info;
                modifyTT('苹果')
            } else {
                config5.dots = data5[4].info;
                modifyTT('其它')
            }
            $('#t5 svg').remove();
            draw1()
        }
    );

    //更改地图tooltip内容
    function modifyTT(name) {
        let dotsTooltip = {
            content: function (d) {
                return `${name}手机在${d.dots.name}的销量为：${d.dots.value}万台`
            }
        };
        config5.dotsTooltip = dotsTooltip;
    }

    //地图圆点动画
    let timer;
    let a=1.1;
    function animation() {
        timer = setInterval(function () {
           $('.mapDots').attr('r',function (i,y) {
              if (y>10){
                  a=0.9;
              }
              if (y<2){
                  a=1.1
              }
              return y*a
           });
        },100)
    }
    animation();

    //偏差修改
    $('#t5 .multiText').attr('y', function () {
        return this.getAttribute('y') - 10
    });
</script>
</html>